<template>
  <div class="tab_wrap">
    <div
      class="tab_content"
      v-if="!$util.isEmpty(tabData)">
      <div
        class="tab_item"
        v-for="(item, index) in tabData"
        :key="index"
        @click="switchTab(item,index)"
        :class="{active: index == currentTab}">
        <div class="tab_body">
          <p class="tab_title" >{{ $util.isEmpty(item)?'' : item.name }}</p>
          <p class="tab_num_box">{{ $util.isEmpty(item)?'' : item.total }}</p>
        </div>
      </div>
    </div>
    <!-- <div class="filter_wrap" @click="filterShow">
            <div class="txt">筛选</div>
            <div>
                <i class="iconfont iconshaixuan"></i>
            </div>
        </div> -->
  </div>
</template>
<script>
export default {
	name: 'OrderTab',
	props: {
		tabData: {
			type: Array,
			default: () => []
		},
		value: {
			type: [Number, String],
			default: 0
		}
	},
	data() {
		return {
			currentTab: 0
		}
	},
	created() {
		this.currentTab = this.value
	},
	methods: {
		switchTab(item, index) {
			if (this.currentTab === index) return
			this.$emit('input', index)
			this.$emit('switchTab', item)
		},
		filterShow() {
			this.$emit('filterShow')
		}
	},
	watch: {
		value(val) {
			this.currentTab = val
		}
	}

}
</script>

<style lang="scss" scoped>
    .tab_wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        border-bottom: 1px solid #ddd; /*no*/
        font-size: 24px;
        color: #666;
        & .tab_content{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-around;
            & .tab_item {
                flex: 1;
                text-align: center;
                position: relative;
                color: #999999;
                padding-top: 5px;
                & .tab_title{
                    font-size: 26px;
                }
                & .tab_num_box{
                    font-size: 22px;
                }

                &.active{
                        &::after{
                        content: "";
                        display: block;
                        position: absolute;
                        bottom: -4px;
                        left: 50%;
                        transform: translate(-50% , 0);
                        width: 60px;
                        height: 6px;
                        background-color: #ffd11a;
                        border-radius: 2px;
                    }
                    & .tab_title,& .tab_num_box{
                        color:  #333333;
                    }
                }
            }
        }
        // & .filter_wrap{
        //     padding-left: 40px;
        //     display: flex;
        //     flex-direction: column;
        //     justify-content: center;
        //     align-items: center;
        //     position: relative;
        //     &::after{
        //         content: '';
        //         height: 60px;
        //         position: absolute;
        //         background-color: #dddddd;
        //         width: 1Px;
        //         left: 0;
        //         top: 50%;
        //         transform: translate(0 ,-50%);
        //     }
        // }
    }
    .tab_body {
        padding: 5px;
    }
</style>
